// 窗口加载
window.addEventListener('load', function() {
    // 定义数据源,渲染数据
    let apiCateDate = [
        { name: '全部', keyword: 'ip' },
        { name: '生活服务', keyword: '银行卡' },
        { name: '金融科技', keyword: '视频' },
        { name: '交通地理', keyword: '天气' },
        { name: '充值缴费', keyword: '手机号' },
        { name: '数据智能', keyword: 'ip' },
        { name: '企业工商', keyword: '营业执照' },
        { name: '应用开发', keyword: 'app' },
        { name: '电子商务', keyword: '银行卡' },
        { name: '吃喝玩乐', keyword: '海鲜大餐' },
        { name: '文娱视频', keyword: '海量娱乐' },
        { name: '免费接口大全', keyword: '视频' },
        { name: '短信', keyword: '手机号' },
        { name: '汽车', keyword: '身份证实名认证' },
        { name: '核验', keyword: '银行卡' },
        { name: '最新发布', keyword: '身份证实名认证' },
        { name: 'API私有化部署', keyword: '银行卡' },
    ];
    //定义变量保存数据
    let apiA = '';
    apiCateDate.forEach(function(v) {
        // console.log(v);
        apiA += `<li>${v.name}</li>`

    });
    apiL.innerHTML = apiA;

    // 点击事件变文字
    // 获取元素
    let Ali = document.querySelectorAll('#apiL>li')
        // input前面的文字
    let serall = document.getElementById('serall');
    //input
    let inputQ = document.getElementById('inputQ')
        // console.log(serall);
    Ali.forEach(function(v, i) {
        // console.log(v);
        v.addEventListener('click', function() {
            // alert(222)
            serall.innerHTML = apiCateDate[i].name;
            inputQ.setAttribute('placeholder', apiCateDate[i].keyword)

            // 添加active
            Ali.forEach(function(vv) {
                vv.classList.remove('active')
            })
            this.classList.add('active')
        })
    });



    // 渲染
    let api_ul = [{
            a: "./images/API_01.jpg",
            b: '2021出行防疫政策指南',
            c: '免费',
            d: false
        }, {
            a: "./images/API_02.jpg",
            b: '身份证实名认证',
            c: '￥0.2000/次',
            d: true

        }, {
            a: "./images/API_03.jpg",
            b: '天气预报',
            c: '免费',
            d: false

        }, {
            a: "./images/API_04.jpg",
            b: '银行卡四元素校验',
            c: '￥0.3360/次',
            d: true

        }, {
            a: "./images/API_05.jpg",
            b: '短信API服务',
            c: '￥0.0400/次',
            d: true

        }, {
            a: "./images/API_01.jpg",
            b: '2021出行防疫政策指南',
            c: '免费',
            d: false
        }, {
            a: "./images/API_02.jpg",
            b: '身份证实名认证',
            c: '￥0.2000/次',
            d: true

        }, {
            a: "./images/API_03.jpg",
            b: '天气预报',
            c: '免费',
            d: false

        }, {
            a: "./images/API_04.jpg",
            b: '银行卡四元素校验',
            c: '￥0.3360/次',
            d: true

        }, {
            a: "./images/API_05.jpg",
            b: '短信API服务',
            c: '￥0.0400/次',
            d: true

        }, {
            a: "./images/API_01.jpg",
            b: '2021出行防疫政策指南',
            c: '免费',
            d: false
        }, {
            a: "./images/API_02.jpg",
            b: '身份证实名认证',
            c: '￥0.2000/次',
            d: true

        }, {
            a: "./images/API_03.jpg",
            b: '天气预报',
            c: '免费',
            d: false

        }, {
            a: "./images/API_04.jpg",
            b: '银行卡四元素校验',
            c: '￥0.3360/次',
            d: true

        }, {
            a: "./images/API_05.jpg",
            b: '短信API服务',
            c: '￥0.0400/次',
            d: true

        }, {
            a: "./images/API_01.jpg",
            b: '2021出行防疫政策指南',
            c: '免费',
            d: false
        }, {
            a: "./images/API_02.jpg",
            b: '身份证实名认证',
            c: '￥0.2000/次',
            d: true

        }, {
            a: "./images/API_03.jpg",
            b: '天气预报',
            c: '免费',
            d: false

        }, {
            a: "./images/API_04.jpg",
            b: '银行卡四元素校验',
            c: '￥0.3360/次',
            d: true

        }, {
            a: "./images/API_05.jpg",
            b: '短信API服务',
            c: '￥0.0400/次',
            d: true

        }, ]
        // 定义变量保存数据
    let ab = '';

    api_ul.forEach(function(v) {
        console.log(v)
        ab += `<li class="rel">
        <span class="tips ${v.d==true?'on':''}">企业专用</span>
        <div class="mt55">
            <a href="#">
               <div class="x"><img src="${v.a}" alt=""></div>
                <p class="tcenter ">${v.b}

                    <br>
                    <span class="font14 ${v.c=="免费"?"green":"red"}">${v.c}</span>
                </p>

            </a>
        </div>
        <a href="#" class="link">申请数据</a>
    </li>
        `

    })
    api_a.innerHTML = ab;



})